<template>
  <div>
    <div id="powerIndexEchart" style="height: 320px;"></div>
  </div>
</template>

<script>
export default {
  name: "echartsEnginneer.vue",
  data() {
    return {
      val: {
        dts: [20220111,20220112,20220113,20220114,20220115,20220116,20220117,20220118,20220119,20220111],
        values: [11,22,33,44,55,66,77,88,99,66]
      }
    }
  },
  mounted() {
    this.drawEchartsEnginner(this.val)
  },
  methods: {
    drawEchartsEnginner(val) {
      var echarts = require("echarts")
      var chartCapacity = document.getElementById('powerIndexEchart')
      var capaEchart = echarts.init(chartCapacity)
      var option
      option = {
        title: [
          {
            text: '构建成功率',
            right: '50%',
            y: '10px',
            textStyle: {
              fontSize: 20
            }
          },
          {
            text: '(近30天数据）',
            left: '50%',
            y: '13px',
            textStyle: {
              fontSize: 14
            }
          }
        ],
        toolbox: {
          top: "10",
          right: "10",
          feature: {
            dataView: {show: true, readonly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            var str = params[0].name + ':'
            var total = 0
            params.forEach(item=>{
              if(item.value === '-') {
                str+='0%'
              }else {
                str += item.value +'%'
              }
            })
            return str
          }
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '12%',
          top: '30%',
          containLabel: true
        },
        yAxis: [
          {
            type: 'value',
            name: '%'
          }
        ],
        xAxis:
          {
            type: 'category',
            data: val.dts,
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 40,
            }
          },
          series: [
        {
          name: '',
          type: 'bar',
          barWidth: 20,
          data: val.values,
          itemStyle: {
            normal: {
              color: '#1890ff'
            }
          }
        }
      ]

      }
      option && capaEchart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
